<template>
    <div>
               <el-card class="box-card" style="width: 400px">
                       <div slot="header" class="clearfix">
                               <span>{{ admin.name }}</span>
                           </div>
                       <div style="line-height: 50px;margin-left: 20px;">
                               <div style="display: flex;justify-content: center;">
                                       <el-upload   :show-file-list="false"  :on-success="onSuccess"  :data="admin"
                        :headers="headers"  action="/admin/userface">
                                               <img title="点击修改用户图像" :src="admin.userFace"
                            style="height: 100px;width: 100px;border-radius:  50px" alt="">
                                           </el-upload>
                                   </div>
                               <div>电话号码：<el-tag>{{ admin.telephone }}</el-tag></div>
                               <div>手机号码：<el-tag>{{ admin.phone }}</el-tag></div>
                               <div>居住地址：<el-tag>{{ admin.address }}</el-tag></div>
                               <div>用户标签： <el-tag type="success" v-for="(r, index) in admin.roles" :key="index">{{ r.nameZh
                               }}</el-tag>
                                   </div>
                               <div style="justify-content: space-around;margin-top: 15px;text-align:center;">
                                       <el-button size="small" type="primary"
                        @click="showUpdateAdminInfoView">修改信息</el-button>
                                       <el-button size="small" type="danger"
                        @click="showUpdatePasswordView">修改密码</el-button>
                                   </div>
                           </div>
                   </el-card>
               <el-dialog    title="编辑用户信息"  :visible.sync="dialogVisible"  width="30%">

            <el-form :model="admin2" :rules="rules" ref="admin2" style="margin: 10px;" width="40%" class="demo-ruleForm">
                <el-form-item label="用户昵称" prop="name">
                    <el-input v-model="admin2.name"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="telephone">
                    <el-input v-model="admin2.telephone"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="admin2.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户地址" prop="address">
                    <el-input v-model="admin2.address"></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 190px;padding-top: 20px;">
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="updateAdminInfo('admin2')">确 定</el-button>
                </el-form-item>
            </el-form>
                   
                   </el-dialog>
               <el-dialog  title="修改密码"  :visible.sync="passwordDialogVisible"  width="35%">
                       <el-form :model="ruleForm" style="margin: 20px;" status-icon :rules="rules1" ref="ruleForm"
                label-width="120px" class="demo-ruleForm">
                               <el-form-item label="请输入旧密码" prop="oldPass">
                                       <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                                   </el-form-item>
                               <el-form-item label="请输入新密码" prop="pass">
                                       <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                                   </el-form-item>
                               <el-form-item label="确认密码" prop="checkPass">
                                       <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                                   </el-form-item>
                               <el-form-item style="margin-left: 120px;padding-top: 20px;">
                                       <el-button size="small" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                                       <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
                                   </el-form-item>
                           </el-form>
                   </el-dialog>
           </div>
</template>
<script>
export default {
    name: "AdminInfo",
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            headers: {
                Authorization: window.sessionStorage.getItem('tokenStr')
            },
            ruleForm: {
                oldPass: '',
                pass: '',
                checkPass: ''
            },
            rules1: {
                oldPass: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
                pass: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { required: true, message: '请确认密码', trigger: 'blur' },
                    { validator: validatePass2, trigger: 'blur' }
                ]
            },
            admin: null,
            admin2: null,
            dialogVisible: false,
            passwordDialogVisible: false,
            rules: {
                name: [
                    { required: true, message: '请输入用户昵称', trigger: 'blur' }
                ],
                telephone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入用户地址', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.initAdmin();
    },
    methods: {
        onSuccess() {
            this.initAdmin();
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.ruleForm.adminId = this.admin.id;
                    this.putRequest('/admin/pass', this.ruleForm).then(resp => {
                        if (resp) {
                            this.postRequest('/logout');
                            window.sessionStorage.removeItem("user");
                            window.sessionStorage.removeItem("tokenStr");
                            this.$store.commit('initRoutes', []);
                            this.$router.replace('/');
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        showUpdatePasswordView() {
            this.passwordDialogVisible = true;
        },
        updateAdminInfo(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.putRequest('/admin/info', this.admin2).then(resp => {
                        if (resp) {
                            this.dialogVisible = false;
                            this.initAdmin();
                        }
                    })
                }

            });
        },
        showUpdateAdminInfoView() {
            this.dialogVisible = true;
        },
        initAdmin() {
            this.getRequest('/admin/info').then(resp => {
                if (resp) {
                    this.admin = resp;
                    this.admin2 = Object.assign({}, this.admin);
                    window.sessionStorage.setItem("user",
                        JSON.stringify(resp));
                    this.$store.commit('INIT_CURRENTADMIN', resp);
                }
            })
        }
    }
}
</script>
<style></style>